<template>
    <a-form ref="methodRef" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" :model="methodInfo">
        <a-form-item label="业务方法名称" name="methodName" :rules="[{ required: true, message: '请输入名称!' }]">
            <a-input v-model:value="methodInfo.methodName"></a-input>
        </a-form-item>
        <a-form-item label="业务方法类型" name="type">
            <a-select ref="select" v-model:value="methodInfo.methodType"  @change="mehtodTypeChange">
                <a-select-option value="NOTICEMESSAGE">消息通知</a-select-option>
                <a-select-option value="newData">新增数据</a-select-option>
                <a-select-option value="updatgeData">更新数据</a-select-option>
                <a-select-option value="deleteData">删除数据</a-select-option>
                <a-select-option value="varibleSeeting">变量赋值</a-select-option>
                <a-select-option value="integrateMethod">集成方法</a-select-option>
                <a-select-option value="localInterface">本地接口</a-select-option>
            </a-select>
        </a-form-item>
        <a-card v-if="methodInfo.methodType === 'NOTICEMESSAGE'">
            <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" :model="messageTo">
                <a-form-item label="通知对象" name="code">
                    <a-radio-group v-model:value="messageTo.toSomebody">
                        <a-radio value="orguser">组织架构选人</a-radio>
                        <a-radio value="formulauser">公式定义器选人</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="*">
                    <div style="
                       border: 1px solid #e6e8eb;
                       display: flex;
                       justify-content: space-between;
                       align-items: center;
                    ">
                     <a-space>
                            <div style="overflow: auto" class="tagboxs">
                                <a-tag closable @close="handleClose(messageTo.selectUsers)" v-for="tag in messageTo.selectUsers.names" :key="tag">
                                    {{ tag }}
                                </a-tag>
                            </div>
                     </a-space>
                        <a-tooltip title="请选择处理人">
                            <a-button style="margin-left: auto" size="small" secondary type="info"
                                @click="openUserSelectedModal(messageTo.selectUsers)">
                                <template #icon>
                                    <UserOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </div>
                </a-form-item>
                <a-form-item label="URL链接" name="code" >
                    <a-radio-group v-model:value="messageTo.urlLink">
                        <a-radio value="currentInstance">当前实例</a-radio>
                    </a-radio-group>
                </a-form-item>                
                <a-form-item label="通知方式" name="code">
                    <a-checkbox-group v-model:value="messageTo.reminderCheckedList"  >             
                       <a-checkbox value="todo" :disabled="true">待办</a-checkbox>      
                       <a-checkbox value="shortmessage">短信</a-checkbox>      
                       <a-checkbox value="email">电子邮件</a-checkbox>      
                    </a-checkbox-group>     
                </a-form-item>
                <a-form-item label="消息内容" name="code">
                    <a-radio-group v-model:value="messageTo.contextType">
                        <a-radio value="messageTemplate">引用通知模板</a-radio>                        
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="消息模版" name="code">
                    <a-select ref="select" v-model:value="messageTo.templateId" >
                         <a-select-option value="default">默认</a-select-option>                
                    </a-select>
                </a-form-item>                
            </a-form>
        </a-card>
    </a-form>
</template>

<script lang="tsx" setup>
import { reactive, h, ref, unref, onMounted,defineComponent } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import type { FormInstance } from 'ant-design-vue';
import { useModal } from '@/hooks/useModal/useModal';
import SettingOrg from '@/components/setting/assigneeSetting.vue';
import { template } from 'lodash-es';

interface MethodItem {
    defaultData?: any;
};

const props = withDefaults(defineProps<MethodItem>(), {
    defaultData: {
        method: {
            id: '',
            processDefinitionId: '',
            methodName: '',
            methodCode: '',
            methodType: '',
            methodContext: '',
        }
    }
});
const methodRef = ref<FormInstance>();
const methodInfo = reactive(props.defaultData.method);
const messageTo = reactive({
    toSomebody: ref('orguser'),
    selectUsers:{
        names:[],
        values:[],
        selects:[] },
    urlLink:ref('currentInstance'),
    reminderCheckedList:['todo'],
    contextType:ref('messageTemplate'),
    templateId:ref('default'),
    toUsers:''
});

//人员选择器
const selectedMethodType = ref('');
const editFormRef = ref<any>(null);
const [ModalRender, modalRef] = useModal();
const editDrawerBindValue = reactive({
  defaultSelectData: [],
  selectedKey: '',
   runType:''
});
const mehtodTypeChange = (value: string) => {       
    methodInfo.methodType = value;
    console.log(methodInfo.methodType);

};
const openUserSelectedModal = async(selectUsers)=>{
    editDrawerBindValue.runType='0';
    editDrawerBindValue.defaultSelectData=selectUsers.selects;    
    ModalRender.show({
      title: '选择处理人',
      width: '70%',
      // 是否显示右上角确定取消
      defaultExtra: true,
      destroyOnClose: true,
      content: () => {
        return <SettingOrg  ref={editFormRef} defaultData={unref(editDrawerBindValue)}></SettingOrg>;
      },
      // 确定方法执行
      onOk: async (values) => {        
        const res = await editFormRef.value?.handleSubmit();               
        if (!res) return;        
        setSelectedModfiyNodes(res);        
      },
      
    });
  };

function setSelectedModfiyNodes(users){
    messageTo.selectUsers.names = [];
    messageTo.selectUsers.values = [];
    messageTo.selectUsers.selects = [];
  let nodeNames = "";
  users.forEach(item=>{
    nodeNames += item.NAME + ",";
  });
  nodeNames = nodeNames.substring(0,nodeNames.length -1);
  messageTo.selectUsers.names = nodeNames.split(",");

  let nodeValues = "";
  users.forEach(item=>{
    nodeValues += item.NO + ",";
  });
  nodeValues = nodeValues.substring(0,nodeValues.length -1);

  messageTo.selectUsers.values = nodeValues.split(",");
  messageTo.selectUsers.selects = users;    
}

const handleClose = (selectUsers) => {
    selectUsers.names = [];
    selectUsers.values = [];
    selectUsers.selects = [];
}


const onSubMit = () => {
   if(methodInfo.methodType ==="NOTICEMESSAGE"){
      messageTo.toUsers = JSON.stringify(messageTo.selectUsers.selects);
      methodInfo.methodContext = JSON.stringify(messageTo);
      
   }
    return [methodInfo, methodRef]
};
const loadInfo=()=>{
   if(methodInfo.methodContext.trim().length>0){
      const messageOld = JSON.parse(methodInfo.methodContext); 
      
      messageTo.contextType = messageOld.contextType;
      messageTo.reminderCheckedList =messageOld.reminderCheckedList; 
      messageTo.selectUsers = messageOld.selectUsers;
      messageTo.templateId = messageOld.templateId;
      messageTo.toSomebody = messageOld.toSomebody;
      messageTo.toUsers  = messageOld.toUsers;
      messageTo.urlLink = messageOld.urlLink;
      
       //messageTo = messageOld;
      //console.log(messageOld);
   }
}
onMounted(() => {
    loadInfo();
});

defineExpose({
    handleSubmit: onSubMit,
});
</script>